<template>
    <div>
        <el-dialog :title="sendDirective.title" @close="closeDialog" :visible.sync="directiveShow"
            :close-on-click-modal="false" center width="1072px">
            <!-- <el-select style="width: 100%;margin-bottom: 14px;" v-model="" placeholder="请选择指令">
          <el-option v-for="item in directiveList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select> -->
            <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="下发指令" name="typeA">
                    <div>
                        <el-radio-group style="margin-bottom: 10px;display: block;" v-for="i in 3" :key="i"
                            v-model="sendDirective.type" @change="typeCut">
                            <el-radio style="margin:0 14px 14px 0;" v-for="item in directiveNew(i)" :key="item.id"
                                :label="item.id">{{
                                    item.name }}</el-radio>
                        </el-radio-group>
                        <el-input v-show="sendDirective.type === 20" placeholder="请输入与电话匹配的姓名，多个用英文逗号隔开，最多不超过5个(例如张三,李四)"
                            style="width: 100%;margin-bottom: 3px;" :autosize="{ minRows: 4 }" type="textarea"
                            v-model="sendDirective.spareContent"></el-input>
                        <el-input
                            v-show="sendDirective.type === 20 || sendDirective.type === 22 || sendDirective.type === 30"
                            :placeholder="directiveTip" style="width: 100%;margin-bottom: 6px;" :autosize="{ minRows: 4 }"
                            type="textarea" v-model="sendDirective.content"></el-input>
                        <el-row :gutter="20" v-if="sendDirective.type === 23">
                            <el-col :span="12" style="text-align: right;">
                                <div style="margin-bottom:10px;height:30px" v-for="(item, index) in directiveOptions"
                                    :key="index">{{
                                        item.label }}：</div>
                            </el-col>
                            <el-col :span="12">
                                <el-radio-group v-for="(item, index) in directiveOptions" :key="index"
                                    style="margin-bottom: 10px;display: block;" v-model="sendDirective[item.model]">
                                    <el-radio style="margin: 0 14px 14px 0;" :label="1">是</el-radio>
                                    <el-radio style="margin: 0 14px 14px 0;" :label="0">否</el-radio>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" v-if="sendDirective.type === 24 || sendDirective.type === 25" align="bottom">
                            <el-col :span="12" style="text-align: right;">
                                {{ sendDirective.type === 24 ? '设置语音识别开关：' : '设置低电提醒开关：' }}
                            </el-col>
                            <el-col :span="12">
                                <el-radio-group v-model="sendDirective.content" style="vertical-align: baseline;">
                                    <el-radio style="margin: 0 14px 14px 0;" :label="1">开启</el-radio>
                                    <el-radio style="margin: 0 14px 14px 0;" :label="0">关闭</el-radio>
                                </el-radio-group>
                            </el-col>
                            <el-col :span="24" v-if="sendDirective.type === 24">
                                <div style="text-align: center;" v-show="sendDirective.content === 1">
                                    <el-checkbox v-model="asrSwitch1" true-label="1" false-label="0"
                                        :key="1">小康小康</el-checkbox>
                                    <el-checkbox v-model="asrSwitch2" true-label="1" false-label="0"
                                        :key="2">我要打电话</el-checkbox>
                                    <el-checkbox v-model="asrSwitch3" true-label="1" false-label="0"
                                        :key="3">救命</el-checkbox>
                                </div>
                            </el-col>
                        </el-row>
                      <el-row :gutter="20" v-if="sendDirective.type === 26" align="bottom">
                        <el-col :span="12" style="text-align: right;">
                          设置救命语音识别后操作方式
                        </el-col>
                        <el-col :span="12">
                          <el-radio-group v-model="sendDirective.content" style="vertical-align: baseline;">
                            <el-radio style="margin: 0 14px 14px 0;" :label="1">发送10秒录音</el-radio>
                            <el-radio style="margin: 0 14px 14px 0;" :label="2">拨打客服电话</el-radio>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                        <div v-show="sendDirective.type >= 20 && sendDirective.type <= 23" class="tip"
                            style="color: red;font-size:14px">
                            提示：若输入将发送内容至设备，并且更改后台数据
                        </div>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="指令记录" name="typeB">
                    <el-table :data="directiveRecord.list" max-height="300">
                        <el-table-column prop="createDate" label="下发时间" width="170" align="center"></el-table-column>
                        <el-table-column prop="commandType" label="指令类型" :formatter="formatCommandType" width="140"
                            align="center"></el-table-column>
                        <el-table-column prop="content" label="发送内容" width="200" align="center"></el-table-column>
                        <el-table-column prop="commandState" label="指令状态" width="140" align="center">
                            <template slot-scope="{row}">
                                {{ row.commandState === 1 ? '发送成功' : '已接收' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="receptionContent" label="接收内容" width="200" align="center"></el-table-column>
                        <el-table-column prop="receptionDate" label="接收时间" width="170" align="center"></el-table-column>
                    </el-table>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pages.pageNo" :page-sizes="[20, 50, 100]" :page-size="pages.pageSize"
                        layout="total, sizes, jumper, next, pager, prev" :total="pages.total"></el-pagination>
                </el-tab-pane>
                <el-tab-pane label="心跳记录" name="typeC">
                    <el-table :data="heartbeatList" max-height="300">
                        <el-table-column type="index" label="序号" align="center" width="140px">
                        </el-table-column>
                        <el-table-column prop="createDate" label="心跳记录时间" width="auto" align="center">
                        </el-table-column>
                        <el-table-column prop="equipName" label="呼叫器名称" width="auto" align="center">
                        </el-table-column>
                      <el-table-column label="电量" width="auto" align="center">
                        <template slot-scope="scope">
                          {{ scope.row.power === 1 ? '满电' : scope.row.power === 2 ? '半电' : '电量不足' }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="versions" label="版本号" width="auto" align="center">
                      </el-table-column>
<!--                        <el-table-column label="经纬度" width="auto" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.longitude }}-{{ scope.row.latitude }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="详细地址" width="auto" align="center">
                        </el-table-column>-->
                    </el-table>
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pages.pageNo" :page-sizes="[20, 50, 100]" :page-size="pages.pageSize"
                        layout="total, sizes, jumper, next, pager, prev" :total="pages.total"></el-pagination>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer">
                <el-button type="primary" @click="confirmSendDirective">确 定</el-button>
                <el-button @click="closeDialog">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import BeeperApi from "@/api/equip/beeper";
export default {
    props: {
        beeperId: {
            type: Number,
            default: 0
        },
        equipId: {
            type: Number | String,
            default: 0 | ''
        },
        dataItem: {
            type: String,
            default: "{}"
        },
        ids: {
            type: Array,
            default: []
        },
        show: {
            type: Boolean,
            default: false
        },
        tabName: {
            type: String,
            default: 'typeA'
        }
    },
    data() {
        return {
            asrSwitch1: 0,
            asrSwitch2: 0,
            asrSwitch3: 0,
            sendDirective: {
                type: "",
                content: "",
                title: "下发指令",
                spareContent: '',
                lbsFlag: 1,
                aiFlag: 1,
                recFlag: 1,
                callFlag: 1,
                asrSwitch: []
            },
            directiveShow: false,
            activeName: 'typeA',
            directiveRecord: {
                list: [],
            },
            heartbeatList: [],
            directiveList: [
                { id: 1, name: "获取经纬度" },
                { id: 2, name: "获取电量" },
                { id: 3, name: "获取常用联系人" },
                { id: 4, name: "获取微聊好友" },
                /* { id: 5, name: "获取紧急联系人" },*/
                { id: 6, name: "获取配置信息" },
                { id: 20, name: "设置常用联系人" },
                { id: 21, name: "设置微聊好友" },
                { id: 22, name: "设置紧急联系电话" },
                { id: 23, name: "设置功能开关" },
                { id: 24, name: "设置语音识别开关" },
                { id: 25, name: "设置低电提醒开关" },
                { id: 26, name: "设置救命语音识别后操作方式" },
                { id: 28, name: "设备重启" },
                { id: 29, name: "设备关机" },
                { id: 30, name: "发送文字播报" },
            ],
            directiveOptions: [
                { label: '是否需要经纬度', model: 'lbsFlag' },
                { label: '是否语音识别', model: 'aiFlag' },
                { label: '是否需要录音', model: 'recFlag' },
                { label: '是否需要通话', model: 'callFlag' }
            ],
            rowItem: {},
            pages: {
                pageNo: 1,
                pageSize: 20,
                total: 0
            }
        }
    },
    watch: {
        tabName(newValue, oldValue) {
            this.activeName = newValue
        },
        show(newValue, oldValue) {
            this.directiveShow = newValue
            if (newValue) {
                this.handleSendDirevtive()
                this.handleDirectiveRecord()
            }
        }
    },
    computed: {
        directiveTip() {
            switch (this.sendDirective.type) {
                case 20: case 21:
                    return "请输入电话，多个用英文逗号隔开，最多不超过5个(例如18166666666,13988888888)"
                case 22:
                    return "请输入紧急联系电话，目前仅支持填写一个(例如18166666666)"
                case 30:
                    return "文字格式：仅支持中文、英文字母，数字用同音汉字代替"
            }
        },
    },
    methods: {
        formatCommandType(row, column, cellValue) {
            const target = this.directiveList.find(item => item.id == cellValue)
            return target && target.name
        },
        // 下发指令
        handleSendDirevtive() {
            const { sendDirective } = this
            sendDirective.type = ""
            sendDirective.content = ""
            sendDirective.spareContent = ""
            sendDirective.asrSwitch = []
            sendDirective.lbsFlag = 1
            sendDirective.aiFlag = 1
            sendDirective.recFlag = 1
            sendDirective.callFlag = 1
            this.asrSwitch1 = 0
            this.asrSwitch2 = 0
            this.asrSwitch3 = 0
            if (this.dataItem !== '{}') {
                this.rowItem = JSON.parse(this.dataItem)
                sendDirective.title = "下发指令"
            } else {
                if (!this.ids.length) return this.$message.error("请选择呼叫器")
                sendDirective.title = "批量下发指令"
            }

        },
        // 确认下发指令
        async confirmSendDirective() {
            const { rowItem: { beeperId }, sendDirective: { type, title, content, spareContent, lbsFlag, aiFlag, recFlag, callFlag, asrSwitch }, asrSwitch1, asrSwitch2, asrSwitch3 } = this
            let params = {
                type,
                content,
                spareContent,
            }
            if (type === 23) {
                params = {
                    ...params,
                    lbsFlag,
                    aiFlag,
                    recFlag,
                    callFlag,
                }
            }else if(type===24){
                params = {
                    ...params,
                    asrSwitch: [content,asrSwitch1, asrSwitch2, asrSwitch3].join(''),
                    content:[content,asrSwitch1, asrSwitch2, asrSwitch3].join('')
                }
            }
            title === "下发指令" ? (params.beeperId = beeperId) : (params.beeperIds = this.ids)
            await BeeperApi.sendDirectiveByMq(params)
            this.$message.success('操作成功')

        },
        // 查看指令记录
        async handleDirectiveRecord() {
            const { data } = await BeeperApi.beeperCommandRecord({ beeperId: this.beeperId, pageNo: this.pages.pageNo, pageSize: this.pages.pageSize })
            this.directiveRecord.list = data.list || []
            this.pages.total = data.total
        },
        handleSizeChange(size) {
            let _this = this;
            _this.pages.pageSize = size;
            if (_this.activeName === "typeB") {
                _this.handleDirectiveRecord();
            } else {
                _this.getHeartbeatRecording()
            }
        },
        handleCurrentChange(val) {
            let _this = this;
            _this.pages.pageNo = val;
            if (_this.activeName === "typeB") {
                _this.handleDirectiveRecord();
            } else {
                _this.getHeartbeatRecording()
            }
        },
        handleClick(tab, event) {
            if (this.activeName === 'typeB') {
                this.pages.pageNo = 1
                this.pages.pageSize = 20
                this.handleDirectiveRecord()
            } else if (this.activeName === 'typeC') {
                this.pages.pageNo = 1
                this.pages.pageSize = 20
                this.getHeartbeatRecording()
            }
        },
        async getHeartbeatRecording() {
            const { data } = await BeeperApi.heartbeatPage({ equipId: this.equipId, pageNo: this.pages.pageNo, pageSize: this.pages.pageSize })
            this.heartbeatList = data.list || []
            this.pages.total = data.total
        },
        directiveNew(i) {
            //1 获取 2 设置 3 发送
            let filterIds = [];
            switch (i) {
                case 1:
                    filterIds = [1, 2, 3, 4, 5, 6];
                    break;
                case 2:
                    filterIds = [20, 21, 22, 23, 24, 25, 26, 28, 29];
                    break;
                case 3:
                    filterIds = [30];
                    break;
            }
            let newList = this.directiveList.filter(item => filterIds.includes(item.id));
            return newList;
        },
        closeDialog() {
            this.$emit('closeDialog', false)
            this.directiveRecord.list = []
            this.activeName = 'typeA'
        },
        typeCut() {
            this.sendDirective.content = ''
            this.sendDirective.spareContent = ''
            this.sendDirective.asrSwitch = []
            this.asrSwitch1 = 0
            this.asrSwitch2 = 0
            this.asrSwitch3 = 0
        }
    },
}
</script>

<style lang="scss" scoped></style>
